<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2010 Frederico Caldeira Knabben
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>FCKStyle &amp; FCKStyles</title>
	<script src="../../../editor/_source/fckscriptloader.js" type="text/javascript"></script>
	<script src="../_common/manual_test.js" type="text/javascript"></script>
	<script type="text/javascript">

var FCK = new Object() ;

FCKScriptLoader.Load( 'FCKConfig' ) ;

	</script>
	<script type="text/javascript">

FCKConfig.Debug = false ;
FCKConfig.BasePath = '../../../editor/' ;
FCKConfig.RemoveFormatTags = 'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strong,sub,sup,tt,u,var' ;
FCKConfig.EnterMode = 'p' ;

// Do not add, rename or remove styles here.
FCKConfig.CoreStyles =
{
	'Bold' : {
		Element : 'b',
		Overrides : 'strong'
	},
	'Italic' : {
		Element : 'i',
		Overrides : 'em'
	},
	'Underline' : {
		Element : 'u'
	},
	'Strikethrough' : {
		Element : 'strike'
	},
	'Subscript' : {
		Element : 'sub'
	},
	'Superscript' : {
		Element : 'sup'
	}
} ;

FCKConfig.CustomStyles = {

	'H1 Red Courier' : {
		Element : 'h1',
		Attributes : {
			title : 'Title 1' },
		Styles : {
			'color' : '#ff0000',
			'font-family' : 'Courier New' }
	},
	'Paragraph' : {
		Element : 'p'
	},
	'Bold' : {
		Element : 'b',
		Overrides : 'strong'
	},
	'Italic' : {
		Element : 'i',
		Overrides : 'em'
	},
	'Strong' : {
		Element : 'strong',
		Overrides : 'b'
	},
	'Em' : {
		Element : 'em',
		Overrides : 'i'
	},
	'Span Class Test1' : {
		Element : 'span',
		Attributes : {
			'class' : 'Test1' },
		Overrides : {
			Attributes : {
				'class' : /^Test\d$/ }
			}
	},
	'Span Class Test2' : {
		Element : 'span',
		Attributes : {
			'class' : 'Test2' },
		Overrides : {
			Attributes : {
				'class' : /^Test\d$/ }
			}
	},
	'Span Style Orange' : {
		Element : 'span',
		Styles : {
			'color' : '#ffcc00' }
	},
	'Span Style Green' : {
		Element : 'span',
		Styles : {
			'color' : '#00cc00' }
	},
	'Font Red' : {
		Element : 'font',
		Attributes : {
			'color' : 'red' }
	},
	'Font Blue' : {
		Element : 'font',
		Attributes : {
			'color' : 'blue' }
	}
} ;

	</script>
	<script type="text/javascript">

FCKScriptLoader.Load( 'FCKStyle' ) ;
FCKScriptLoader.Load( 'FCKStyles' ) ;
FCKScriptLoader.Load( 'FCKDebug' ) ;

	</script>
	<script type="text/javascript">

var styles = FCKConfig.CustomStyles ;

var targetWindow ;

function InnerLoaded( innerWindow )
{
	var stylesCombo = document.getElementById( 'xStyles' ) ;

	for ( var styleName in styles )
	{
		AddComboOption( stylesCombo, styleName, styleName ) ;
	}

	// FCK.EditorWindow is required by FCKStyles.
	FCK.EditorWindow = targetWindow = innerWindow ;
	document.getElementById('xSource').value = targetWindow.document.body.innerHTML ;

	document.getElementById('xBtnApply').disabled = false ;
	document.getElementById('xBtnRemove').disabled = false ;
	document.getElementById('xBtnRemoveAll').disabled = false ;
}

function ApplyStyle()
{
	var style = new FCKStyle( styles[ document.getElementById( 'xStyles' ).value ] ) ;
	style.ApplyToSelection( targetWindow ) ;

	document.getElementById('xSource').value = targetWindow.document.body.innerHTML ;

	targetWindow.focus() ;
}

function RemoveStyle()
{
	var style = new FCKStyle( styles[ document.getElementById( 'xStyles' ).value ] ) ;
	style.RemoveFromSelection( targetWindow ) ;

	document.getElementById('xSource').value = targetWindow.document.body.innerHTML ;

	targetWindow.focus() ;
}

function RemoveAll()
{
	FCKStyles.RemoveAll() ;

	document.getElementById('xSource').value = targetWindow.document.body.innerHTML ;

	targetWindow.focus() ;
}

function AddComboOption(combo, optionText, optionValue)
{
	var oOption = document.createElement( 'option' ) ;

	combo.options.add(oOption) ;

	oOption.innerHTML = optionText ;
	oOption.value     = optionValue ;

	return oOption ;
}

	</script>
</head>
<body>
	<table cellpadding="0" cellspacing="0" width="100%" height="100%" border="0">
		<tr>
			<td>
				<h1>
					 FCKStyle &amp; FCKStyles</h1>
				<p>
					<select id="xStyles">
					</select>
					<input id="xBtnApply" type="button" value="Apply" onclick="ApplyStyle(); return false;"
						disabled="disabled" />
					<input id="xBtnRemove" type="button" value="Remove" onclick="RemoveStyle(); return false;"
						disabled="disabled" />
					<input id="xBtnRemoveAll" type="button" value="Remove All" onclick="RemoveAll(); return false;"
						disabled="disabled" />
				</p>
			</td>
		</tr>
		<tr>
			<td height="100%">
				<iframe src="test1_inner.html" width="100%" height="100%" frameborder="1"></iframe>
			</td>
		</tr>
		<tr>
			<td style="padding-top:5px;">
				Source:</td>
		</tr>
		<tr>
			<td>
				<textarea id="xSource" style="width: 100%; height: 200px"></textarea>
			</td>
		</tr>
	</table>
</body>
</html>
